<template>
	<div class="pay">
		<header>
			<i class="el-icon-notebook-2"><span> 订单详情</span></i>
			<hr/>
		</header>
		<div class="shop" v-for="item in carts.items">
			<div class="div1">
				<div class="img">
					<img :src="`${$ip}/api/public/showimg/${item.book.pic}`"/>
				</div>
				<div class="div2">
					<p>{{item.book.name}}</p>
					<span>x{{item.num}}</span>
					<p>￥{{item.price}}</p>
				</div>
			</div>
			<div class="div3">
				<table>
					<tr>
						<td>订单号 <el-input type="text" v-model="carts.ordid" readonly/></td>
					</tr>
					<tr>
						<td>总额 <el-input type="text" v-model="carts.amount" readonly/></td>
					</tr>
					<tr>
						<td>姓名 <el-input type="text" v-model="user.name" readonly/></td>
					</tr>
					<tr>
						<td>电话 <el-input type="tel" v-model="user.phone" readonly/></td>
					</tr>
					<tr>
						<td>地址 <el-input type="text" v-model="user.addr" readonly/></td>
					</tr>
				</table>
			</div>
		</div>
		<div class="div4">
			<aside>
				<span>总价：￥{{carts.amount}}</span>
				<el-button type="danger" v-show="carts.payStatus==0" @click="centerDialogVisible = true">付款</el-button>
				<el-button type="success" v-show="carts.payStatus!=0">已付款</el-button>
			</aside>
		</div>
		<el-dialog :visible.sync="centerDialogVisible" width="24%" style="text-align: center;font-size: 20px;" center>
		  <span style="margin-left: 60px;font-weight: bold;font-size: 25px;">支付金额:{{carts.amount}}元</span>
		  <template>
			  <img src="../../../assets/img/login/pay.png" style="width: 300px;height: 320px;"/>
		  </template>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="centerDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="payment()">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
import { find } from 'core-js/library/core/dict';
export default {
	name:'Pay',
	data(){
		return{
			user:{},
			carts:{},
			centerDialogVisible: false
		}
	},
	methods:{
		payment(){
			this.centerDialogVisible =false;
			this.$postkv("/api/fore/ord/addPay/"+this.$route.query.id).then((resp)=>{
				if(resp.data.code==200){
					this.$message({
				      message: resp.data.msg,
				      type: 'success'
					});
					this.find();
				}else{
					this.$message.error('支付失败')
				}
			})
		},
		find(){
			this.$get("/api/fore/ord/findByOrdid/"+this.$route.query.id).then((resp)=>{
			this.carts =resp.data.data;
			console.log(this.carts);
		})
		}
	},
	mounted(){
		this.orders =this.list;
		this.$get("/api/user/shipInfo").then((resp)=>{
		    this.user =resp.data.data;
		    console.log(resp.data.data);
		})
		console.log(this.$route.query.id);
		this.find();
	}
}
</script>

<style scoped>
.pay{
	width: 80%;
	margin: 0 auto;
}
.pay header{
	width: 100%;
	height: 50px;
	margin-top: 10px;
	text-align: center;
}
.pay header i{
	font-size: 16px;
	font-weight: 480;
}
.pay .shop{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-around;
	border-radius: 8px;
	background-color: #f1f1f1;
}
.pay .shop .div1{
	width: 25%;
	display: flex;
	border-radius: 8px;
}
.pay .shop .img{
	width: 180px;
	height: 200px;
}
.pay .shop .img img{
	width: 96%;
	height: 96%;
	margin-left: 3px;
	margin-top: 4px;
	border-radius: 8px;
}
.pay .div2{
	width: 180px;
	margin: 0 auto;
}
.pay .div2 p:nth-child(1){
	font-size: 18px;
	margin-top: 10px;
	word-wrap: break-word;
	word-break: break-all;
	overflow: hidden;
}
.pay .div2 p:nth-last-child(1){
	font-size: 18px;
	color: red;
	margin-top: 100px;
}
.pay .div3{
	width: 70%;
	text-align: center;
}
.pay .div3 table{
	width: 90%;
	margin: 0 auto;
}
.pay .div3 table .el-input{
	width: 65%;
	text-indent: 0.5em;
}
.pay .div4{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	background-color: #f1f1f1;
}
.pay .div4 aside{
	width: 40%;
	margin-top: 20px;
}
.pay .div4 aside span{
	font-weight: bold;
	color: red;
	margin-left: 175px;
}
.pay .div4 aside .el-button{
	width: 300px;
	margin-left: 30px;
}
</style>
